<template>
  <div>
    <!-- 统计-->
    <template>
      <div>
        <el-row style="width: 100%; height: 150px; text-align: center;">
          <el-col style="width: 33%; height: 100%;">
            <PressureChart/>
          </el-col>
          <el-col style="width: 33%; height: 100%;">
            <PercentageView/>
          </el-col>
          <el-col style="width: 33%; height: 100%;">
            <StatisticsView :option="statisticsOption"/>
          </el-col>
        </el-row>
      </div>
    </template>
    <!-- 表格头 -->
    <div class="table-header">
      <div style="width: 35%; float: left; margin-left: 1%; margin-top: -1%;">
        <el-input placeholder="" v-model="tableSearch" class="input-with-select">
          <el-button slot="append" icon="el-icon-search" @click="searchData"></el-button>
        </el-input>
      </div>
      <el-row style="float: right">
        <el-button @click="reloadData" size="mini" icon="el-icon-refresh-left" round>重置</el-button>
        <el-button @click="addMusicDialog = true" size="mini" icon="el-icon-circle-plus-outline" type="primary" round>
          添加歌曲
        </el-button>
        <el-button size="mini" icon="el-icon-edit" type="warning" round>编辑歌曲</el-button>
        <el-button size="mini" icon="el-icon-delete" type="success" round>批量删除</el-button>
        <el-button size="mini" icon="el-icon-download" type="info" round>导出Excel</el-button>
      </el-row>
    </div>
    <!-- 歌曲信息表 -->
    <template>
      <el-table
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        :data="tableData.filter(data => (!search || data.musicName.toLowerCase().includes(search.toLowerCase())))"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="歌曲名">
                <span>{{ props.row.musicName }}</span>
              </el-form-item>
              <el-form-item label="歌手">
                <span>{{ props.row.singerName }}</span>
              </el-form-item>
              <el-form-item label="歌曲类型">
                <span>{{ props.row.musicTypeName }}</span>
              </el-form-item>
              <el-form-item label="发行时间">
                <span>{{ props.row.publishDate }}</span>
              </el-form-item>
              <el-form-item label="创建时间">
                <span>{{ props.row.createdTime }}</span>
              </el-form-item>
              <el-form-item label="创建人">
                <span>{{ props.row.createdUserId }}</span>
              </el-form-item>
              <el-form-item label="修改时间">
                <span>{{ props.row.updateTime }}</span>
              </el-form-item>
              <el-form-item label="修改人">
                <span>{{ props.row.updateUserId }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
          label="播放"
          prop="musicFileId"
          width="65">
          <template slot-scope="scope">
            <div @click="toPlayer(scope.row)">
              <!--  TODO            <span v-if="playMusic">-->
              <span v-if="true">
                <i class="el-icon-video-play"></i>
              </span>
              <span v-else>
                <i class="el-icon-video-pause"></i>
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="歌曲名"
          prop="musicName">
        </el-table-column>
        <el-table-column
          label="歌手"
          prop="singerName">
        </el-table-column>
        <el-table-column
          label="歌曲类型"
          prop="musicTypeName">
        </el-table-column>
        <el-table-column
          label="发行时间"
          prop="publishDate">
        </el-table-column>
        <el-table-column
          label="创建时间"
          prop="createdTime">
        </el-table-column>
        <el-table-column
          label="操作"
          align="right">
          <template slot="header" slot-scope="scope">
            <el-input
              v-model="search"
              size="mini"
              placeholder="输入关键字搜索"/>
          </template>
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <!-- 分页 -->
    <template>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.pageNum"
          :page-sizes="[20, 50, 100, 200]"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total">
        </el-pagination>
      </div>
    </template>
    <!-- 弹框 -->
    <template>
      <el-dialog title="添加" :visible.sync="addMusicDialog">
        <div>
          <el-button @click="upload" :loading="uploadMusicLoading">选择文件</el-button>
        </div>
        <el-tabs v-model="addMusicActiveName">
          <el-tab-pane label="添加为单曲" name="first">
            <!-- 添加单曲列表 -->
            <div v-for="(model, i) in modelList">
              <el-divider content-position="left">
                <div class="add-number">{{ i + 1 }}</div>
              </el-divider>
              <el-form :model="model">
                <el-form-item label="歌曲" label-width="120px">
                  <el-input v-model="model.musicName"></el-input>
                </el-form-item>
                <el-form-item label="歌曲类型" label-width="120px">
                  <el-select v-model="model.musicTypeId" placeholder="请选择">
                    <el-option v-for="type in musicType" :label="type.name"
                               :value="type.id"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="歌手" label-width="120px">
                  <!-- 选择查询歌手信息 -->
                  <template>
                    <el-input placeholder="请输入歌手名称" class="inputInfo" v-model="singerSetting[i].singerSearch"
                              v-on:focus="focusCustomer(i)" v-on:blur="blurCustomer(i)"/>
                    <!-- 下拉 -->
                    <ul class="sel-ul customer-ht" v-show="singerSetting[i].showCustomer">
                      <div class="text-center loading" v-show="singerSetting[i].showloading">
                        <span
                          style="vertical-align:middle;display:inline-block;font-size:14px;">&nbsp;&nbsp;加载中..</span>
                      </div>
                      <div v-show="!singerSetting[i].showloading">
                        <div v-show="singerSetting[i].singerList.length">
                          <li v-for="item in singerSetting[i].singerList"
                              @mousedown="chooseItem(item, i)">{{ item.singerId + " - " + item.singerName }}
                          </li>
                        </div>
                        <div class="text-center" v-show="!singerSetting[i].singerList.length">暂无数据</div>
                      </div>
                    </ul>
                  </template>
                </el-form-item>
                <el-form-item label="专辑" label-width="120px">
                  <!-- 选择查询专辑信息 -->
                  <template>
                    <el-input placeholder="请输入专辑名称" class="inputInfo" v-model="albumSetting[i].albumSearch"
                              v-on:focus="focusAlbum(i)" v-on:blur="blurAlbum(i)"/>
                    <!-- 下拉 -->
                    <ul class="sel-ul customer-ht" v-show="albumSetting[i].showCustomer">
                      <div class="text-center loading" v-show="albumSetting[i].showloading">
                        <span
                          style="vertical-align:middle;display:inline-block;font-size:14px;">&nbsp;&nbsp;加载中..</span>
                      </div>
                      <div v-show="!albumSetting[i].showloading">
                        <div v-show="albumSetting[i].albumList.length">
                          <li v-for="item in albumSetting[i].albumList"
                              @mousedown="chooseAlbumItem(item, i)">{{ item.albumId + item.albumName }}
                          </li>
                        </div>
                        <div class="text-center" v-show="!albumSetting[i].albumList.length">暂无数据</div>
                      </div>
                    </ul>
                  </template>
                </el-form-item>
                <el-form-item label="发行时间" label-width="120px">
                  <el-date-picker
                    v-model="model.publishDate"
                    type="date"
                    placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
              </el-form>
            </div>
          </el-tab-pane>
          <el-tab-pane label="按照专辑添加" name="second">
            <!-- 添加专辑列表 -->
            <el-form>
              <el-form-item label="创建专辑名称" label-width="120px">
                <el-input v-model="setAlbumName"></el-input>
              </el-form-item>

            </el-form>
          </el-tab-pane>
        </el-tabs>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addMusicDialog = false; modelList = [];">取 消</el-button>
          <el-button type="primary" @click="addMusicSubmit">提 交</el-button>
        </div>
      </el-dialog>
    </template>
    <template>
      <el-dialog title="编辑" :visible.sync="updateMusicDialog">
        <el-form :model="editData">
          <el-form-item label="歌曲" label-width="120px">
            <el-input v-model="editData.musicName"></el-input>
          </el-form-item>
          <el-form-item label="歌曲类型" label-width="120px">
            <el-select v-model="editData.musicTypeId" placeholder="请选择">
              <el-option v-for="type in musicType" :label="type.name"
                         :value="type.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="歌手" label-width="120px">
            <!-- 选择查询歌手信息 -->
            <template>
              <el-input placeholder="请输入歌手名称" class="inputInfo" v-model="singerSettingEdit.singerSearch"
                        v-on:focus="focusCustomerEdit" v-on:blur="blurCustomerEdit"/>
              <!-- 下拉 -->
              <ul class="sel-ul customer-ht" v-show="singerSettingEdit.showCustomer">
                <div class="text-center loading" v-show="singerSettingEdit.showloading">
                        <span
                          style="vertical-align:middle;display:inline-block;font-size:14px;">&nbsp;&nbsp;加载中..</span>
                </div>
                <div v-show="!singerSettingEdit.showloading">
                  <div v-show="singerSettingEdit.singerList.length">
                    <li v-for="item in singerSettingEdit.singerList"
                        @mousedown="chooseItemEdit(item)">{{ item.singerId + " - " + item.singerName }}
                    </li>
                  </div>
                  <div class="text-center" v-show="!singerSettingEdit.singerList.length">暂无数据</div>
                </div>
              </ul>
            </template>
          </el-form-item>
          <el-form-item label="专辑" label-width="120px">
            <!-- 选择查询专辑信息 -->
            <template>
              <el-input placeholder="请输入专辑名称" class="inputInfo" v-model="albumSettingEdit.albumSearch"
                        v-on:focus="focusAlbumEdit()" v-on:blur="blurAlbumEdit()"/>
              <!-- 下拉 -->
              <ul class="sel-ul customer-ht" v-show="albumSettingEdit.showCustomer">
                <div class="text-center loading" v-show="albumSettingEdit.showloading">
                        <span
                          style="vertical-align:middle;display:inline-block;font-size:14px;">&nbsp;&nbsp;加载中..</span>
                </div>
                <div v-show="!albumSettingEdit.showloading">
                  <div v-show="albumSettingEdit.albumList.length">
                    <li v-for="item in albumSettingEdit.albumList"
                        @mousedown="chooseAlbumItemEdit(item)">{{ item.albumId + item.albumName }}
                    </li>
                  </div>
                  <div class="text-center" v-show="!albumSettingEdit.albumList.length">暂无数据</div>
                </div>
              </ul>
            </template>
          </el-form-item>
          <el-form-item label="发行时间" label-width="120px">
            <el-date-picker
              v-model="editData.publishDate"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="updateMusicDialog = false;">取 消</el-button>
          <el-button type="primary" @click="updateMusicSubmit">提 交</el-button>
        </div>
      </el-dialog>
    </template>
  </div>
</template>

<script>
import {
  addMusic,
  addMusicByList,
  delMusicById,
  findMusicPage,
  findMusicTypeAll,
  getMusicResource,
  updateMusicById
} from '@/api/music'
import StatisticsView from '@/components/echarts/StatisticsView'
import PercentageView from '@/components/echarts/PercentageView'
import Bus from '../../utils/mitter'
import ScoreChart from "@/components/echarts/ScoreChart";
import PressureChart from "@/components/echarts/PressureChart";
import {findSingerByName} from "@/api/singer";
import {findAlbumByName} from "@/api/album";
import {getResource} from "@/api/fileUpload";

export default {
  name: 'Music',
  data() {
    return {
      loading: false,
      // 查询条件
      queryModel: {
        musicName: '',
        singerName: '',
      },
      // 歌曲/歌词地址
      muc: '',
      lrc: '',
      // 播放某列音乐
      playMusic: true,
      // 当前迭代位置
      currentIndex: 0,
      // 歌曲搜索
      tableSearch: '',
      tableSelect: '',
      // 上传歌曲按钮
      uploadMusicLoading: false,
      // 歌曲列表
      tableData: [],
      search: '',
      // 多选
      multipleSelection: [],
      // 分页
      page: {
        pageNum: 1,
        pageSize: 20,
        total: 0
      },
      // 添加歌曲
      addMusicDialog: false,
      updateMusicDialog: false,
      modelList: [],
      // 按照单曲/专辑添加切换
      addMusicActiveName: 'first',
      // 歌曲对象
      musicData: {},
      // 文件集合
      fileList: [],
      // 歌曲全部统计
      statisticsOption: {
        title: {
          text: 'Referer of a Website',
          subtext: 'Fake Data',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              {value: 1048, name: 'Search Engine'},
              {value: 735, name: 'Direct'},
              {value: 580, name: 'Email'},
              {value: 484, name: 'Union Ads'},
              {value: 300, name: 'Video Ads'}
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
      // 歌曲类型
      musicType: [],
      // 创建专辑
      setAlbumName: '',
      // 歌曲编辑
      editData: {
        id: '',
        musicName: '',
        musicTypeId: '',
        singerId: '',
        albumId: '',
        publishDate: ''
      },
      // 歌曲编辑时的歌手搜索
      singerSettingEdit: {
        singerSearch: '',
        // 歌手搜索: 显示下拉框
        showCustomer: false,
        // 歌手搜索: 显示下拉框: 加载中
        showloading: false,
        // 查询返回的歌手信息
        singerList: [{
          singerId: '',
          singerName: ''
        }]
      },
      // 歌曲编辑时的专辑搜索
      albumSettingEdit: {
        albumSearch: '',
        // 歌手搜索: 显示下拉框
        showCustomer: false,
        // 歌手搜索: 显示下拉框: 加载中
        showloading: false,
        // 查询返回的歌手信息
        albumList: [{
          albumId: '',
          albumName: ''
        }]
      },
      // ====歌手添加相关====
      singerSetting: [
        { // 初始化
          // 歌手搜索
          singerSearch: '',
          // 歌手搜索: 显示下拉框
          showCustomer: false,
          // 歌手搜索: 显示下拉框: 加载中
          showloading: false,
          // 查询返回的歌手信息
          singerList: [{
            singerId: '',
            singerName: ''
          }]
        }
      ],
      // ====专辑添加相关====
      albumSetting: [
        { // 初始化
          // 歌手搜索
          albumSearch: '',
          // 歌手搜索: 显示下拉框
          showCustomer: false,
          // 歌手搜索: 显示下拉框: 加载中
          showloading: false,
          // 查询返回的歌手信息
          albumList: {
            albumId: '',
            albumName: ''
          }
        }
      ],
      //
    }
  },
  components: {
    PressureChart,
    ScoreChart,
    StatisticsView,
    PercentageView
  },
  created() {
    this.getMusicPage();
    this.getMusicType();
  },
  computed: {
    /**
     * 作用: 解决监听singerSetting新旧值相同问题
     * @returns {any}
     */
    singerSettingCP() {
      return JSON.parse(JSON.stringify(this.singerSetting))
    },
    /**
     * 作用: 解决监听singerSetting新旧值相同问题
     * @returns {any}
     */
    albumSettingCP() {
      return JSON.parse(JSON.stringify(this.albumSetting))
    }
  },
  watch: {
    'singerSettingCP': {
      handler: function (newVal, oldVal) {
        if (this.singerSetting.length > 0) {
          console.log('进来了')
          if (newVal[this.currentIndex].singerSearch != oldVal[this.currentIndex].singerSearch) {
            this.focusCustomer(this.currentIndex);
          }
        }
      },
      deep: true //为true，表示深度监听，这时候就能监测到值变化
    },
    'albumSettingCP': {
      handler: function (newVal, oldVal) {
        if (this.albumSetting.length > 0) {
          console.log('进来了')
          if (newVal[this.currentIndex].albumSearch != oldVal[this.currentIndex].albumSearch) {
            this.focusAlbum(this.currentIndex);
          }
        }
      },
      deep: true //为true，表示深度监听，这时候就能监测到值变化
    }
  },
  mounted() {
    // 文件选择后的回调
    Bus.on('fileAdded', () => {
      console.log('文件已选择')
    })

    // 文件上传成功的回调
    Bus.on('fileSuccess', (res) => {
      console.log('文件上传成功')
      console.log(res)
      // 待入库的歌曲信息
      this.modelList.push({
        musicName: res.data.fileName,
        singerId: '',
        musicFileId: res.data.id,
        lyricId: '',
        musicTypeId: '',
        publishDate: '',
        albumId: '',
        albumName: ''
      });
      // 将上传成功后返回的文件信息保存到fileList
      this.fileList.push(res.data)
      // 用于批量添加歌手信息
      this.singerSetting.push({
        // 歌手搜索
        singerSearch: '',
        // 歌手搜索: 显示下拉框
        showCustomer: false,
        // 歌手搜索: 显示下拉框: 加载中
        showloading: false,
        // 初始化查询返回的歌手信息
        singerList: [{
          singerId: '',
          singerName: ''
        }]
      });
      // 初始化查询返回的专辑信息
      this.albumSetting.push({ // 初始化
        // 歌手搜索
        albumSearch: '',
        // 歌手搜索: 显示下拉框
        showCustomer: false,
        // 歌手搜索: 显示下拉框: 加载中
        showloading: false,
        // 查询返回的歌手信息
        albumList: {
          albumId: '',
          albumName: ''
        }
      });

      this.uploadMusicLoading = false
    })
    Bus.on('uploadError', () => {
      this.uploadMusicLoading = false
    })
  },
  destroyed() {
    Bus.off('fileAdded')
    Bus.off('fileSuccess')
  },
  methods: {
    /**
     * 重置
     */
    reloadData() {
      this.page.pageNum = 1;
      this.page.pageSize = 20;
      this.queryModel.singerName = '';
      this.queryModel.musicName = '';
      this.getMusicPage();
      console.log('重置')
    },
    /**
     * 搜索
     */
    searchData() {
      this.queryModel.musicName = this.tableSearch;
      this.queryModel.singerName = this.tableSearch;
      this.getMusicPage();
    },
    /**
     * 点击播放
     */
    toPlayer(file) {
      let params = {
        musicFileId: file.musicFileId,
        lyricFileId: file.lyricFileId,
        singerAvatarFileId: file.singerPicturesFileId
      }
      getMusicResource(params).then(res => {
        console.log(res)
        this.play({
          name: file.musicName,
          artist: '',
          url: res.data.MUSIC,
          cover: res.data.SINGER_AVATAR, // prettier-ignore
          lrc: res.data.LYRIC
        });
      })

      this.playMusic = !this.playMusic;
    },
    /**
     * 查询所有音乐类型
     */
    getMusicType() {
      findMusicTypeAll().then(res => {
        this.musicType = res.data
      })
    },
    /**
     * 下拉搜索歌手信息
     */
    focusCustomer(i) {
      this.currentIndex = i;
      console.log('进入焦点 ' + i)
      if (this.singerSetting[i].singerSearch) {
        findSingerByName(this.singerSetting[i].singerSearch).then(res => {
          // 查询前先将列表清空
          this.singerSetting[i].singerList = []
          res.data.forEach(singer => {
            // 放入歌手下拉项
            this.singerSetting[i].singerList.push({singerId: singer.id, singerName: singer.singerName})
          })
        })
      }
      this.singerSetting[i].showCustomer = true
    },
    /**
     * 下拉搜索歌手信息Edit
     */
    focusCustomerEdit() {
      if (this.singerSettingEdit.singerSearch) {
        findSingerByName(this.singerSettingEdit.singerSearch).then(res => {
          // 查询前先将列表清空
          this.singerSettingEdit.singerList = []
          res.data.forEach(singer => {
            // 放入歌手下拉项
            this.singerSettingEdit.singerList.push({singerId: singer.id, singerName: singer.singerName})
          })
        })
      }
      this.singerSettingEdit.showCustomer = true
    },
    focusAlbum(i) {
      this.currentIndex = i;
      console.log('进入焦点 ' + i)
      if (this.albumSetting[i].albumSearch) {
        findAlbumByName(this.albumSetting[i].albumSearch).then(res => {
          // 查询前先将列表清空
          this.albumSetting[i].albumList = [];
          res.data.forEach(album => {
            // 放入专辑下拉项
            this.albumSetting[i].albumList.push({albumId: album.id, albumName: album.name})
          })
        })
      }
      this.albumSetting[i].showCustomer = true
    },
    focusAlbumEdit() {
      if (this.albumSettingEdit.albumSearch) {
        findAlbumByName(this.albumSettingEdit.albumSearch).then(res => {
          // 查询前先将列表清空
          this.albumSettingEdit.albumList = [];
          res.data.forEach(album => {
            // 放入专辑下拉项
            this.albumSettingEdit.albumList.push({albumId: album.id, albumName: album.name})
          })
        })
      }
      this.albumSettingEdit.showCustomer = true
    },
    blurCustomer(i) {
      this.singerSetting[i].showCustomer = false
    },
    blurCustomerEdit() {
      this.singerSettingEdit.showCustomer = false
    },
    blurAlbum(i) {
      this.albumSetting[i].showCustomer = false
    },
    blurAlbumEdit() {
      this.albumSettingEdit.showCustomer = false
    },
    // 新增 设置歌手ID
    chooseItem(item, i) {
      // 将获取到的值绑定给modelList
      this.modelList[i].singerId = item.singerId;
      // 将名称显示在搜索框
      this.singerSetting[i].singerSearch = item.singerName
    },
    chooseItemEdit(item) {
      // 将获取到的值绑定给modelList
      this.editData.singerId = item.singerId;
      // 将名称显示在搜索框
      this.editData.singerSearch = item.singerName
    },
    // 新增 设置专辑ID
    chooseAlbumItem(item, i) {
      // 将获取到的值绑定给modelList
      this.modelList[i].albumId = item.albumId;
      // 将名称显示在搜索框
      this.albumSetting[i].albumSearch = item.albumName
    },
    chooseAlbumItemEdit(item) {
      // 将获取到的值绑定给modelList
      this.editData.albumId = item.albumId;
      // 将名称显示在搜索框
      this.editData.albumSearch = item.albumName
    },
    /**
     * 播放
     */
    play(param) {
      Bus.emit('openPlayer', param);
    },

    /**
     * 上传
     */
    upload() {
      this.uploadMusicLoading = true;
      // 打开文件选择框
      Bus.emit('openUploader')
    }
    ,
    /**
     * 添加歌曲
     */
    addMusicSubmit() {
      addMusicByList(this.modelList).then(res => {
        if (res.statusCode === 200) {
          this.getMusicPage()
          this.$notify({
            title: '成功',
            message: '已完成添加',
            type: 'success'
          });
        } else {
          this.$notify.error({
            title: 'ERROR',
            message: '添加失败, 未知错误'
          });
        }
      })
      this.addMusicDialog = false
    },
    /**
     * 编辑歌曲
     */
    updateMusicSubmit() {
      updateMusicById(this.editData).then(res => {
        if (res.statusCode === 200) {
          this.getMusicPage()
          this.$notify({
            title: '成功',
            message: res.data,
            type: 'success'
          });
        } else {
          this.$notify.error({
            title: '失败',
            message: res.data
          });
        }
      })
      this.updateMusicDialog = false
    }
    ,

    // handleRemove(sysFile, fileList) {
    //   console.log(sysFile, fileList)
    // },
    // handlePreview(sysFile) {
    //   console.log(sysFile)
    // },
    /**
     * 添加歌曲
     */
    addMusic() {
      addMusic().then(res => {
        console.log('添加歌曲')
        console.log(res)
      })
    }
    ,
    /**
     * 每页大小
     * @param val
     */
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.getMusicPage();
    }
    ,
    /**
     * 当前页
     * @param val
     */
    handleCurrentChange(val) {
      this.getMusicPage();
    }
    ,
    /**
     * 多选
     */
    handleSelectionChange(val) {
      this.multipleSelection = val
    }
    ,
    /**
     * 表格编辑
     * @param index
     * @param row
     */
    handleEdit(index, row) {
      this.editData.id = row.id
      this.editData.albumId = row.albumId
      this.editData.musicName = row.musicName
      this.editData.musicTypeId = row.musicType
      this.editData.singerId = row.singerId
      this.editData.publishDate = row.publishDate
      this.updateMusicDialog = true;
    }
    ,
    /**
     * 表格行删除
     * @param index
     * @param row
     */
    handleDelete(index, row) {
      let params = {
        musicId: row.id
      }
      delMusicById(params).then(res => {
        if (res.statusCode == 200) {
          this.getMusicPage();
          this.$notify({
            title: '成功',
            message: res.data,
            type: 'success'
          });
        } else {
          this.$notify.error({
            title: '失败',
            message: res.data
          });
        }

      })
    }
    ,
    /**
     * 获取歌曲信息
     */
    getMusicPage() {
      this.loading = true;
      let params = {
        page: this.page,
        musicName: this.queryModel.musicName,
        singerName: this.queryModel.singerName
      }
      findMusicPage(params).then(res => {
        this.tableData = res.data.records
        this.page.total = res.data.total
        this.loading = false;
      })
    },

  }
}
</script>

<style scoped>
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

/* 表头 */
.table-header {
  margin: 18px 10px 1px 0;
}

/* 分页 */
.block {
  float: right;
}

/* 添加歌曲弹框里的列表序号 */
.add-number {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: bisque;
  text-align: center;
  line-height: 20px;
  font-family: cursive;
  color: darkblue;
}

.add-number:after {
}
</style>
